<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>个人中心</title>
	<script src="../public/js/jquery.min.js"></script>
	<script src="../public/js/vue/vue.js"></script>
	<script src="../public/js/vue/vue-resource.js"></script>
	<script src="../public/js/publicjs.js"></script>
	<link rel="stylesheet" href="../public/css/reset.css">
	<link rel="stylesheet" href="../public/css/samecss.css">
	<link rel="stylesheet" href="../css/percenterdetails.css">

	<script src="../public/js/changeheaderpic/jquery-2.1.3.min.js"></script>
	<script src="../public/js/changeheaderpic/iscroll-zoom.js"></script>
	<script src="../public/js/changeheaderpic/hammer.js"></script>
	<script src="../public/js/changeheaderpic/lrz.all.bundle.js"></script>
	<script src="../public/js/changeheaderpic/jquery.photoClip.js"></script>
	<script>
		/*document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5  < 128/3 ? 128/3 : document.documentElement.clientWidth / 7.5 + 'px';
		window.onresize = function(){
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5  < 128/3 ? 128/3 : document.documentElement.clientWidth / 7.5 + 'px';
		}
		console.log(document.documentElement.style.fontSize);*/
		document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75  < 64/3 ? 64/3 : document.documentElement.clientWidth / 3.75 + 'px';
		window.onresize = function(){
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75  < 64/3 ? 64/3 : document.documentElement.clientWidth / 3.75 + 'px';
		}
		console.log(document.documentElement.style.fontSize);
	</script>
</head>
<body>
<div id="appbox">
	<!--头部内容-->
	<header>
		<a class="gobackbtn morecss" href="javascript:history.go(-1);" title="goback"></a>
		<p class="font15 text-black24 text-center">个人信息</p>
		<div id="pertops">
			<div class="imgbox">
				<img :src="percenterdetailsdata.htmlavatar" alt="">
			</div>
			<p class="text-black96 font14 text-center" @click="changeheaderpicstatus=true">点击修改头像</p>
		</div>
	</header>
	<!--中间内容-->
	<div id="content" class="">
		<div class="content2 bg-white">
			<div class="content2li">
				<!--<div class="imgbox floatleft"><img src="../images/headeraddress.png" alt=""></div>-->
				<p class="font14 text-black24 floatleft">昵称</p>

				<p class="font14 text-black24 floatright">{{percenterdetailsdata.nickname}}</p>
			</div>
			<div class="content2li">
				<!--<div class="imgbox floatleft"><img src="../images/headeraddress.png" alt=""></div>-->
				<p class="font14 text-black24 floatleft">性别</p>

				<p class="font14 text-black24 floatright">男女</p>
			</div>
			<div class="content2li content2lilast">
				<!--<div class="imgbox floatleft"><img src="../images/headeraddress.png" alt=""></div>-->
				<p class="font14 text-black24 floatleft">出生日期</p>

				<p class="font14 text-black24 floatright">19000201</p>
			</div>
		</div>

		<div class="content2 bg-white">
			<div class="content2li">
				<!--<div class="imgbox floatleft"><img src="../images/headeraddress.png" alt=""></div>-->
				<p class="font14 text-black24 floatleft">手机号</p>

				<p class="font14 text-black24 floatright">{{percenterdetailsdata.telnumber}}></p>
			</div>
			<div class="content2li">
				<!--<div class="imgbox floatleft"><img src="../images/headeraddress.png" alt=""></div>-->
				<p class="font14 text-black24 floatleft">密码</p>

				<p class="font14 text-black24 floatright">修改></p>
			</div>
		</div>

		<div class="content2 bg-white">
			<div class="content2li">
				<!--<div class="imgbox floatleft"><img src="../images/headeraddress.png" alt=""></div>-->
				<p class="font14 text-black24 floatleft">微信登录</p>

				<p class="font14 text-black24 floatright">未启用></p>
			</div>
			<div class="content2li">
				<!--<div class="imgbox floatleft"><img src="../images/headeraddress.png" alt=""></div>-->
				<p class="font14 text-black24 floatleft">新浪微博登录></p>

				<p class="font14 text-black24 floatright">未启用></p>
			</div>
			<div class="content2li">
				<!--<div class="imgbox floatleft"><img src="../images/headeraddress.png" alt=""></div>-->
				<p class="font14 text-black24 floatleft">QQ登陆></p>

				<p class="font14 text-black24 floatright">未启用></p>
			</div>
		</div>


		<div class="content4 bg-white">
			<!--<div class="imgbox floatleft"><img src="../images/headeraddress.png" alt=""></div>-->
			<p class="font14 text-black24 text-center" @click="logoutclick">退出登录</p>
		</div>
	</div>

	<!--修改头像界面-->
	<div id="changeheaderpicbg" v-show="changeheaderpicstatus" ontouchstart="">
		<div id="changeheaderpicbox">
			<!--关闭按钮-->
			<div class="closebtn"><img src="../images/close.png" alt="" @click="changeheaderpicstatus=false"></div>

			<div id="ssssview"></div>
			<div id="ssssclipArea"></div>
			<div class="btns clearfloat">
				<div id="ssssfilebox" class="clearfloat font14 text-black24 text-center floatleft">
					<input class="" type="file" id="ssssfile">
					<span class="clearfloat font14 text-black24 text-center">选择头像文件</span>
				</div>
				<div id="ssssclipBtn" class="font14 text-black24 text-center floatright">截取预览</div>
			</div>
			<div id="sssssubmit" class="font14 text-black24 text-center" @click="dosssssubmit">上传头像</div>
		</div>
	</div>
</div>
<script src="../js/percenterdetails.js"></script>

<!--上传头像插件-->
<script>
    //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
	var selfsetheaderpic;
    var clipArea = new bjj.PhotoClip("#ssssclipArea", {
        size: [250, 250],
        outputSize: [640, 640],
        file: "#ssssfile",
        view: "#ssssview",
        ok: "#ssssclipBtn",
        loadStart: function() {
            console.log("照片读取中");
        },
        loadComplete: function() {
            console.log("照片读取完成");
        },
        clipFinish: function(dataURL) {
            console.log(dataURL);
			localStorage.setItem('headerpic',dataURL);
			selfsetheaderpic=dataURL;
        }
    });
    //clipArea.destroy();
</script>
</body>
</html>